<template>
  <div class="port-box rule-box" id="carduse">
    <div class="equipID"> <span class="iconfont icon-chongdianqia"></span>卡编号: {{cardid}}使用记录</div>
    <div class="rules-list List">
      <mu-load-more
        @refresh="refresh"
        :refreshing="refreshing"
        :loaded-all="loaded_all"
        :loading="loading"
        @load="load"
      >

      <mu-list class="chongzhibox">
          <mu-list-item v-for="(item,index) in cardList" :key="index">
            <mu-list-item-content>
              <div class="fleft">
                <div class="iconfont-box fleft" style="background: rgba(49, 209, 158, 1);">
                  <span class="icon-kahao iconfont"></span>
                </div>
                <div class="data fleft">
                  <p class="data-title">
                    用户名: {{item.userName}}

                  </p>
                  <p class="data-title">
                    实际时间: {{item.realHour}}

                  </p> <p class="data-title">
                  预计时间: {{item.hour}}

                </p> <p class="data-title">
                  充电桩编号: {{item.parkId}}

                </p>

                  <p class="data-time">{{item.startTime}}</p>
                </div>
                <div class="_clear"></div>
              </div>
              <div class="fright" >
                <p style="color:#1EC5F1"> ¥{{item.amount}}</p>
                <p> <span class="data-time">{{item.endTime}}</span></p>

               </div>
              <div class="_clear"></div>
            </mu-list-item-content>
          </mu-list-item>
          <div v-show="nolist" class="nolist">
            <span class="iconfont icon-charging"></span>
            <p>暂无使用记录</p>
          </div>
        </mu-list>
        <!-- <mu-list>
          <mu-list-item v-for="(item,index) in cardList" :key="index">
            <mu-list-item-content>
              <mu-list-item-title>
                <div class="fleft">
                  <p class="title-name">
                    <span class="add-name">{{item.userName}}</span>
                  </p>
                  <p class="xadd">{{item.startTime}}</p>
                </div>

                <div class="fright">
                   <p class="money">
                  <span style="color:#1EC3F1">¥{{item.amount}}</span>
                   </p>
                  <p class="xadd">{{item.endTime}}</p>
                </div>
              </mu-list-item-title>
            </mu-list-item-content>
          </mu-list-item>
          <div v-show="nolist" class="nolist">
            <span class="iconfont icon-charging"></span>
            <p>暂无使用记录</p>
          </div>
        </mu-list> -->
      </mu-load-more>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import "vant/lib/toast/style/index";
export default {
  data() {
    return {
      cardid: this.$route.params.id,
      num: 5,
      loaded_all: false,
      refreshing: false,
      loading: false,
      text: "List",
      nolist: true,
      cardList: []
    };
  },
  mounted() {
    this.getList({ pageNo: 1, pageSize: 5, cardNo: this.cardid });
  },
  methods: {
    getList(param) {
      this.$api.getUseRecods(param).then(res => {
        console.log(res);
        if (res.data.data != null) {
          this.cardList = res.data.data.records;
          if (res.data.data.pages == 1) {
            Toast("已加载全部数据");
            this.loaded_all = true;
          }
        }
      });
    },
    refresh() {
      this.refreshing = true;
      this.$refs.container.scrollTop = 0;
      setTimeout(() => {
        this.refreshing = false;
        this.getList({ pageNo: 1, pageSize: 5, cardNo: this.cardid });
      }, 2000);
    },
    load() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.num += 3;

        this.getList({ pageNo: 1, pageSize: this.num, cardNo: this.cardid });
      }, 2000);
    }
  },
  watch: {
    cardList: function(v) {
      if (v == "") {
        this.nolist = true;
      } else {
        this.nolist = false;
      }
    }
  }
};
</script>

